<!DOCTYPE html>
<script src='../../../../../resources/gesture-util.js'></script>
<style>
  body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: red;
  }
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  #spacer {
    height: 800%;
  }
  #bottombar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 50%;
    height: 25%;
    background-color: green;
    border: 5px solid black;
    box-sizing: border-box;
  }
  #topbar {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 50%;
    background-color: darkred;
    border: 5px solid black;
    box-sizing: border-box;
  }
  #inflow {
    position: absolute;
    top: 150vh;
    left: 0;
    height: 25%;
    width: 100%;
    background-color: limegreen;
  }
</style>

<div id="inflow"></div>
<div id="spacer"></div>
<div id="bottombar"></div>
<div id="topbar"></div>

<script>
  window.onload = async () => {
    if (!internals)
      return;

    testRunner.waitUntilDone();
    internals.setPageScaleFactor(2);

    // Test that panning the visual viewport while zoomed in causes
    // position-fixed elements to move. Scroll down 1.5 screen heights so that
    // the visual viewport scrolls down for 0.5 and then the layout viewport
    // for 1.
    await waitForCompositorCommit();
    await smoothScroll(1800, 400, 300, GestureSourceType.TOUCHPAD_INPUT, "down", SPEED_INSTANT);
    await waitForCompositorCommit();

    testRunner.notifyDone();
  }
</script>
